<template>
  <el-drawer
    size="40%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :title="dialogTitle"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-divider />
    <div class="divStyle">
      <div style="display: flex">
        <el-icon style="color: orange; font-size: 45px"><Warning /></el-icon>
        <div style="text-align: left; margin-left: 10px">
          <div style="color: orange">
            1：当前界面只能设置<span
              @click="helperClick"
              style="color: blue; cursor: pointer; text-decoration: underline"
              >【按钮类型】</span
            >为菜单按钮的权限，不能设置数据按钮权限，数据按钮权限是通过规则来控制是否能操作。
          </div>
          <div style="color: orange">
            2：上级角色会继承下级角色的权限，分配时请注意
          </div>
        </div>
      </div>
      <div style="text-align: left; margin-top: 10px">
        <el-text class="mx-1">查看方式:</el-text>
        <el-switch
          v-model="isContainSubordinate"
          class="ml-2"
          style="
            --el-switch-on-color: #13ce66;
            --el-switch-off-color: #2c3e50;
            margin-left: 10px;
            cursor: progress;
          "
          @change="switchClick"
          inline-prompt
          active-text="显示包含下级权限"
          inactive-text="显示当前角色权限"
        />
      </div>
      <el-tree
        class="treeStyle"
        :data="buttonList"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        show-checkbox
        :check-strictly="true"
        ref="buttonTree"
        width="100%"
        node-key="key"
        :props="defaultProps"
      >
        <template #default="{ node, data }">
          <!-- <div class="custom-node">
            <el-icon color="#67C23A"
              ><component class="icons" :is="data.icon"></component
            ></el-icon>
            <span>&nbsp;{{ node.label }}</span>
          </div> -->
          <div class="custom-node">
            <el-icon v-if="data.nodeType !== nodeTypeEnum.button"
              ><component class="icons" :is="data.icon"></component
            ></el-icon>
            <span v-if="data.nodeType === nodeTypeEnum.button"
              >&nbsp;
              <buttonStyleLayout
                :modelData="data.extendData"
                :buttonName="data.extendData.buttonName"
              ></buttonStyleLayout>
            </span>
            <span v-else>&nbsp;{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <div style="position: relative; top: 10px">
        <el-button
          icon="Close"
          size="large"
          type="danger"
          plain
          @click="handleClose"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="large"
          icon="Check"
          plain
          @click="getCheckedValues"
          >保存</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>
  <script  lang="ts">
import {
  ref,
  onMounted,
  defineComponent,
  PropType,
  computed,
  reactive,
} from "vue";
import { ElMessage } from "element-plus";
import { SysRole } from "@/model/role/role";
import { treeExtendOutPut } from "@/model/public/treeModel";
import { buttonOrRoleOutPut, RoleButtonExend } from "@/model/public/public";
import { getButtonKeyByRoleId, saveRoleButtonAuthority } from "@/api/role";
import { getSystemMenuButtonList } from "@/api/button";
import { nodeTypeEnum } from "@/enum/public";
import buttonStyleLayout from "@/components/buttonStyle.vue";
import { helperFileMethod } from "@/api/publicTool";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<SysRole>,
      required: true,
    },
  },

  setup(props, context) {
    //系统菜单数据
    const buttonList = ref<treeExtendOutPut[]>([]);
    //角色树
    const buttonTree = ref();
    //默认按钮数据
    const defaultButtonData = ref<buttonOrRoleOutPut[]>([]);
    //是否包含下级
    const isContainSubordinate = ref<boolean>(true);
    //角色和按钮关系
    const roleButtonExend = reactive<RoleButtonExend>({
      roleId: "0",
      buttonIds: [],
    });

    //tree指定操作
    const defaultProps = {
      children: "children",
      label: "label",
      //设置属于下级角色的菜单，不能勾选
      disabled(data: treeExtendOutPut) {
        var model = defaultButtonData.value.find(
          (s) => s.buttonKey == data.key
        );
        if (model?.subordinateRoleButton === true || data.children != null) {
          return true;
        }
      },
      class(data: treeExtendOutPut) {
        if (data.nodeType != nodeTypeEnum.button) {
          return "role-button-style"; //设置复选框不显示
        }
      },
    };

    //初始加载dom
    onMounted(() => {
      //getSystemSelectMsg();
      //getRoleTreeMsg();
    });

    //打开时加载
    const handleDialogOpen = function () {
      getCorporationSystemMenuListMsg(
        props.modelData.CorporationKey,
        props.modelData.SystemKey
      );
      isContainSubordinate.value = true;
      getMenuKeyByRoleIdMsg();
    };

    //获取公司下系统的菜单
    const getCorporationSystemMenuListMsg = function (
      corporationKey: string,
      systemKey: string
    ) {
      if (corporationKey === "" || corporationKey === undefined) {
        ElMessage({
          message: "公司不能为空",
          type: "warning",
        });
        return;
      }
      if (systemKey === "" || systemKey === undefined) {
        ElMessage({
          message: "系统不能为空",
          type: "warning",
        });
        return;
      }

      //获取公司下系统菜单按钮数据
      getSystemMenuButtonList({
        corporationKey,
        systemKey,
      }).then(({ data, code }) => {
        if (code == 200) {
          buttonList.value = data;
        }
      });
    };

    //获取角色默认菜单按钮
    const getMenuKeyByRoleIdMsg = function () {
      getButtonKeyByRoleId({
        roleId: props.modelData.RoleId,
        isContainSubordinate: isContainSubordinate.value,
      }).then(({ data, code }) => {
        if (code == 200) {
          defaultButtonData.value = data;
          var buttonKey = data.map((f: { buttonKey: any }) => f.buttonKey);
          buttonTree.value!.setCheckedKeys(buttonKey);
        }
      });
    };

    //获取tree选中节点
    const getCheckedValues = () => {
      //获取全选状态值，true 只获取全选中的值
      const checkedNodes = buttonTree.value.getCheckedKeys(true);
      //获取子集角色按钮key
      var subordinateRoleMenuKeys = defaultButtonData.value
        .filter((f) => f.subordinateRoleButton === true)
        .map((f) => f.buttonKey);
      //保存时过滤掉子集角色的按钮数据
      var keys = checkedNodes.filter(
        (item: string) => !subordinateRoleMenuKeys.includes(item)
      );
      roleButtonExend.roleId = props.modelData.RoleId;
      roleButtonExend.buttonIds = keys;
      saveRoleButtonAuthority(roleButtonExend).then(({ data, code, msg }) => {
        if (code == 200) {
          // useUserStore().loadMenus(); //刷新菜单
          handleClose();
          ElMessage({
            message: msg,
            type: "success",
          });
        }
      });
    };

    //switch开关事件
    const switchClick = function (istrue: boolean) {
      isContainSubordinate.value = istrue;
      getMenuKeyByRoleIdMsg();
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
    };
    //帮助事件
    const helperClick = function () {
      helperFileMethod("pages/39e27e/");
    };

    return {
      handleClose,
      dialogVisibled,
      handleDialogOpen,
      buttonList,
      getCheckedValues,
      buttonTree,
      isContainSubordinate,
      defaultProps,
      switchClick,
      nodeTypeEnum,
      helperClick,
    };
  },
  components: { buttonStyleLayout },
});
</script>
      
      <style scoped>
.divStyle {
  margin: 10px;
}

.treeStyle {
  margin: 10px;
  max-height: 650px;
  overflow-y: auto;
}
</style>